<template>
  <div class="container">
    <el-dialog
      width="400px"
      title="审核"
      :visible.sync="showDialog"
      @close="btnCancel"
    >
      <el-form :model="formData" :rules="rules" ref="formData">
        <el-form-item prop="chkState">
          <el-radio v-model="formData.chkState" :label="1">通过</el-radio>
          <el-radio v-model="formData.chkState" :label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item prop="chkRemarks">
          <el-input type="textarea" v-model="formData.chkRemarks"></el-input>
        </el-form-item>
      </el-form>
      <el-row
        style="margin-top: 30px"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-button size="mini" @click="btnCancel">取消</el-button>
          <el-button size="mini" @click="btnOk" type="primary">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 导入试题审核接口
import { choiceCheck } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      // 定义审核弹出框是否显示
      showDialog: false,
      // 定义通过单选按钮
      formData: {
        chkState: 1,
        chkRemarks: '',
        id: ''
      },
      rules: {
        chkRemarks: [
          { required: true, message: '请输入意见', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    btnCancel () {
      this.showDialog = false
      this.$refs.formData.resetFields()
    },
    btnOk () {
      try {
        this.$refs.formData.validate(async isOk => {
          if (isOk) {
            await choiceCheck(this.formData)
            this.$message.success('审核成功')
            // 重新获取列表  刷新审核状态
            this.$emit('choice')
            // 关闭弹层
            this.showDialog = false
          } else {
            this.$message.error('表单验证失败')
          }
        })
      } catch (error) {
        this.$message.error('审核失败')
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
